<template>
  <el-dialog
    :title="form.dictCode ? '修改字典数据': '添加字典数据'"
    :close-on-click-modal="false"
    v-model="isShow"
    width="400px"
    @close="close"
  >
    <el-form ref="rulesForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="字典类型" prop="dictType">
         <el-input v-model="form.dictType" :disabled="true" />
      </el-form-item>
      <el-form-item label="数据标签" prop="dictLabel">
        <el-input v-model="form.dictLabel"></el-input>
      </el-form-item>
      <el-form-item label="数据键值" prop="dictValue">
        <el-input v-model="form.dictValue"></el-input>
      </el-form-item>
      <el-form-item label="显示排序" prop="dictSort">
        <el-input-number v-model="form.dictSort" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="状态" prop="enable">
        <el-radio v-model="form.enable" :label="true">正常</el-radio>
        <el-radio v-model="form.enable" :label="false">停用</el-radio>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" :rows="2" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { toRefs, reactive, ref, computed, watch, defineComponent } from 'vue'
import { useStore } from 'vuex'
import dialog from '@/mixins/dialog'
import { ElMessage } from 'element-plus'
import { DictData, StateType as DictDataStateType } from '@/store/modules/system/dictData'

interface DataType {
  form: DictData;
  rules: object;
}
export default defineComponent({
  name: 'AuDictData',
  emits: ['onRefresh', 'close'], // this line
  props: {
    value: {
      type: Boolean,
      default: false
    },
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props, context) {
    const store = useStore<{dictData: DictDataStateType}>()
    const { dialogM } = dialog(props, context)
    const data = reactive<DataType>({
      form: {
        dictLabel: null,
        dictValue: null,
        dictCode: null,
        dictSort: null,
        dictType: null,
        cssClass: null,
        listClass: null,
        isDefault: null,
        enable: true,
        remark: null
      },
      rules: {
        dictLabel: [
          { required: true, message: '数据标签不能为空', trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '数据健值不能为空', trigger: 'blur' }
        ]
      }
    })
    const rulesForm = ref(null)
    const dictData = computed<DictData>(() => {
      return store.state.dictData.data
    })
    const submit = () => {
      rulesForm.value && (rulesForm.value as any).validate((valid: boolean) => {
        if (valid) {
          if (dictData.value && dictData.value.dictCode) {
            store.dispatch('dictData/updateDictData', data.form).then(() => {
              ElMessage({
                message: '修改成功',
                type: 'success'
              })
              context.emit('onRefresh')
              dialogM.close()
            })
          } else {
            store.dispatch('dictData/addDictData', data.form).then(() => {
              ElMessage({
                message: '新增成功',
                type: 'success'
              })
              context.emit('onRefresh')
              dialogM.close()
            })
          }
        }
      })
    }
    const getDictData = () => {
      if (dictData.value && dictData.value.dictCode) {
        store.dispatch('dictData/getDictData', dictData.value.dictCode).then(res => {
          data.form = res.data
        })
      }
    }
    watch(() => props.value, (val) => {
      if (!val) {
        data.form = {
          dictLabel: null,
          dictValue: null,
          dictCode: null,
          dictSort: null,
          dictType: null,
          cssClass: null,
          listClass: null,
          isDefault: null,
          enable: true,
          remark: null
        }
        rulesForm.value && (rulesForm.value as any).resetFields()
      } else {
        if (dictData.value && dictData.value.dictType) {
          data.form.dictType = dictData.value.dictType
        } else {
          data.form.dictType = props.queryParams.dictType
        }
        getDictData()
      }
    })
    return {
      rulesForm,
      submit,
      ...toRefs(data),
      ...toRefs(dialogM)
    }
  }
})
</script>
